<template>
  <view class="content">
    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link back" >
              <i class="icon f7-icons arrow-back">arrow_left</i>
            </a>
          </div>
          <div class="title" style="margin-left: -50rpx">最新</div>
          <div class="right">

          </div>
        </div>
      </div>
      <div class="page-content">
        <div class="light-gray-title">Style 1 With Images</div>
        <div class="list detailed-list list-dividers full-width">
          <ul>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media"><img src="/static/img/events/1.jpg" class="event-thumbnail" alt=""></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">Art Exhibition</div>
                    <div class="item-footer">Museum of Art, New York City</div>
                  </div>
                  <div class="item-after"><span class="badge bg-color-primary">9:00 AM</span></div>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media"><img src="/static/img/events/2.jpg" class="event-thumbnail" alt=""></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">Jay-Z Concert</div>
                    <div class="item-footer">Staples Center, Los Angeles</div>
                  </div>
                  <div class="item-after"><span class="badge bg-color-primary">4:00 PM</span></div>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media"><img src="/static/img/events/3.jpg" class="event-thumbnail" alt=""></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">Comedy Show</div>
                    <div class="item-footer">The Laugh Club, Chicago</div>
                  </div>
                  <div class="item-after"><span class="badge bg-color-primary">6:30 PM</span></div>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media"><img src="/static/img/events/4.jpg" class="event-thumbnail" alt=""></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">Dance Performance</div>
                    <div class="item-footer">Opera House, Sydney</div>
                  </div>
                  <div class="item-after"><span class="badge bg-color-primary">8:00 PM</span></div>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media"><img src="/static/img/events/5.jpg" class="event-thumbnail" alt=""></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">Hard Rock Concert</div>
                    <div class="item-footer">O2 Arena, London</div>
                  </div>
                  <div class="item-after"><span class="badge bg-color-primary">9:30 PM</span></div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="light-gray-title">Style 2 With Icons</div>
        <div class="list detailed-list list-dividers full-width">
          <ul>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media event-icon"><i class="icon f7-icons">sportscourt_fill</i></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">24 January 2024</div>
                    <div class="item-footer">Basketball Game at Torronto</div>
                  </div>
                  <div class="item-after event-time">8:00 PM</div>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media event-icon"><i class="icon f7-icons">scissors</i></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">12 February 2024</div>
                    <div class="item-footer">Barber at Montreal</div>
                  </div>
                  <div class="item-after event-time">4:00 PM</div>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media event-icon"><i class="icon f7-icons">tickets_fill</i></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">12 February 2024</div>
                    <div class="item-footer">Avengers Movie at cinema</div>
                  </div>
                  <div class="item-after event-time">6:30 PM</div>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media event-icon"><i class="icon f7-icons">person_3_fill</i></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">27 February 2024</div>
                    <div class="item-footer">Business Meeting</div>
                  </div>
                  <div class="item-after event-time">2:00 PM</div>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media event-icon"><i class="icon f7-icons">hammer_fill</i></div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-name">11 March 2024</div>
                    <div class="item-footer">Work on the house</div>
                  </div>
                  <div class="item-after event-time">9:30 PM</div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </view>
</template>

<script setup lang="ts">

</script>


<style scoped >
.content {
  height: 100vh;
}
</style>
